<!-- 首页 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view style="">
			<view class="index-top">
				<view class="index-top-nav" style="margin-bottom: 10rpx;">
					<text class="nav-title">{{switchType}}开单(元)</text>
					<view class="">
						<switch :disabled="todayDisabled" :checked="checkToday" color="#007AFF" @click="switchClick(0)"
							@change="todayChangeClick" style="transform:scale(0.5);" />
						<text style="font-size:0.8rem ; ">今</text>
					</view>
					<view class="">
						<switch :disabled="yestodayDisabled" :checked="checkYestody" color="#007AFF"
							@click="switchClick(1)" @change="yestodayChangeClick" style="transform:scale(0.5)" /><text
							style="font-size:0.8rem ; ">昨</text>
					</view>
					<view class="">
						<switch :disabled="monthDisabled" :checked="checkMonth" color="#007AFF" @click="switchClick(2)"
							@change="monthChangeClick" style="transform:scale(0.5)" />
						<text style="font-size:0.8rem ; ">月</text>
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;">
					<text class="index-top-title"> ￥{{totalsum | addZero}}</text>
					<view class="imageExcell" @click="urlExcellClick">
						<image src="../../static/report.png" mode=""></image>
						<text>报表</text>
					</view>
				</view>
				<view class="index-top-price">
					<view class="top-price-item">
						<text style="color: #333;font-weight: bold;font-size: 28rpx;">{{historicalsales.count}}</text>
						<text>单量</text>
					</view>
					<view class="top-price-item">
						<text style="font-size: 0.8rem;">￥ <text
								style="color: #333;font-weight: bold;font-size: 28rpx;">{{historicalsales.ReceiveSum | addZero}}</text></text>
						<text>现收</text>
					</view>
					<view class="top-price-item">
						<text style="font-size: 0.8rem;">￥ <text
								style="color: #333;font-weight: bold;font-size: 28rpx;">{{historicalsales.newsum | addZero}}</text></text>
						<text>赊货</text>
					</view>
					<view class="top-price-item">
						<text style="font-size: 0.8rem;">￥ <text
								style="color: #333;font-weight: bold;font-size: 28rpx;">{{historicalsales.qiansum | addZero}}</text></text>
						<text>销账</text>
					</view>
				</view>
			</view>

			<view class="indexButton">
				<view style="background-color: #438FE8 ;" @click="urlOopenOrder">立即开单</view>
				<view @click="toInformation" style="background-color:#B139E9">系统设置</view>
			</view>
		</view>

		<!-- 列表数据 -->

		<view class="indexList">
			<!-- @scrolltolower="getNewsData()" :style="{height:scrollviewHeight}" -->
			<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="lower">
				<!--  -->
				<view class="indexItem scrollView" v-for="(item,index) in indexListData " :key="index"
					@click="toWebView(item)">
					<view class="scrollTag">
						<image v-if="item.billliststate==2" style="" src="../../static/jushou.png" mode=""></image>
						<image v-if="item.billliststate==3" style="" src="../../static/chayi.png" mode=""></image>
					</view>
					<view class="list">
						单号：{{item.OrderType==1?getReplaceId("B"+item.Id) : getReplaceId("S"+item.Id)}}
					</view>
					<view class="list">
						<text style="">买家: </text>
						<text>{{item.cCusName || '散客' }}</text>
					</view>
					<view class="list" style="display: flex;">
						<view class="">
							<text style="">日期: </text>
							<text>{{item.CreateTime}}</text>
						</view>
					</view>
					<view class="list">
						<text style="margin-right: 10rpx;">地址: </text>
						<text>{{item.cCusAddress || '无地址'}}</text>
					</view>
					<view class="list">
						<view class="flexBox">
							<text class="money" style="">金额: <text :class="{'textRed':item.TotalSum<0}">￥<b
										class="b">{{item.TotalSum | addZero}}</b></text> </text>
							<view>
								<view class="tag">
									<image v-if="item.IsCancel" style="" src="/static/stateIcon/zuof.png" mode="">
									</image>
									<image v-if="item.Type==1" src="/static/shezhang.png" mode=""></image>
									<image v-else src="/static/stateIcon/xians.png" mode=""></image>
								</view>
							</view>
							<view>
								<view class="tag">
									<image v-if="item.billliststate==0" style="" src="/static/stateIcon/daiq.png"
										mode="">
									</image>
									<image v-if="item.billliststate==1" style="" src="/static/stateIcon/qians.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="">
					<uniLoadMore :status="status" :contentText="contentText" :rows="indexListData"></uniLoadMore>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	// 引入工具函数
	import util from '../../util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				// 昨日 今日  本月
				switchType: '今日',
				// 是否开启开关  今日
				checkToday: true,
				// 是否开启开关  昨日
				checkYestody: false,
				// 是否开启开关  本月
				checkMonth: false,
				// 是否关闭今日
				todayDisabled: false,
				// 是否关闭昨日
				yestodayDisabled: false,
				// 是否关闭本月
				monthDisabled: false,
				// 列表数据
				indexListData: [],
				// 首页顶部今日销售总额数据
				totalsum: "",
				historicalsales: {
					// 条数
					count: "",
					// 现收
					ReceiveSum: "",
					// 赊货 
					newsum: "",
					// 回款
					qiansum: ""
				},
				// 传递参数
				queryParmas: {
					PageIndex: 1,
					PageRows: 5,
					SortField: "Id",
					SortType: 'desc',
					Search: {
						Days: 0, //默认今日
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
					}

				},
				// 总条数
				Total: 0,
				// 获取顶部销售数据
				topPramsData: {
					Search: {
						Days: 0,
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
					}

				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.status = "loading"
			// 重置相关参数
			this.indexListData = []
			this.switchType = "今日"
			this.queryParmas.PageIndex = 1
			this.queryParmas.PageRows = 5
			this.queryParmas.Search.Days = 0
			this.checkToday = true
			this.checkYestody = false
			this.checkMonth = false
			this.getIndexListData()
			this.getIndexTopListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 上拉加载更多
		onReachBottom() {
			this.status = "loading"
			this.getIndexListData()
			this.getIndexListData('on')
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		onLoad() {
			// 获取公司/店铺信息
			// this.getUserCompayInfo()
		},
		// 格式化千分位 保留两位小数 过滤器  
		filters: {
			addZero: function(data) {
				if (!data) {
					return '0.00'
				}
				// console.log('1231', data.toFixed(2));
				return util.toThousands(data)
			}
		},
		methods: {


			// this.queryParmas.Search.CommpayId=res.Data[0].Id
		},
		async onShow() {
			//清楚查询页面条件缓存
			uni.removeStorageSync('CollectMoneySearch')
			uni.removeStorageSync('indexSearchQueryValue')
			uni.removeStorageSync('updateOrderMain')
			uni.removeStorageSync('updateOrderSub')

			this.status = "loading"

			// 获取公司id
			await this.getUserCompayInfo()
			// 重置列表数据
			this.indexListData = []
			// 顶部开关初始化
			this.switchType = "今日"
			this.queryParmas.PageIndex = 1
			this.queryParmas.PageRows = 5
			this.topPramsData.Search.Days = 0
			this.queryParmas.Search.Days = 0
			this.checkToday = true
			this.checkYestody = false
			this.checkMonth = false
			this.yestodayDisabled = true
			this.monthDisabled = true
			// 获取首页列表数据
			this.queryParmas.PageIndex = 1
			this.getIndexListData()

			// 获取顶部销售数据
			this.getIndexTopListData()

		},
		methods: {
			// 字符串空格处理
			getReplaceId(data) {
				if (data) {
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 跳转报表页面
			urlExcellClick() {
				uni.navigateTo({
					url: '/pages/excell/excell'
				})
			},
			// 去小票页面
			toWebView(item) {
				// console.log("{{{{{{{{{{{{{{{{{{{{{{}}}}}}}}}}}}}}}}}}}}}}"+item.IsCancel)
				uni.navigateTo({
					url: '/pages/webview/webview?Id=' + item.Id + '&billId=' + item.billlistId + '&isCancel=' +
						item.IsCancel
				})
			},
			// 触底
			lower(e) {
				if (this.indexListData.length >= this.Total) return
				this.getIndexListData('on')
			},
			toFiexd(data) {
				return data.toFixed(2);
			},

			async getUserCompayInfo() {
				if (!uni.getStorageSync('CompanyInfo')) {
					await this.getCompanyInfo()
				} else {
					this.queryParmas.Search.CommpayId = uni.getStorageSync('CompanyInfo').Id

					// MAC地址
					this.getMAC()
				}
			},
			// 今日 明日 本月点击事件
			switchClick(event) {
				if (event == 0) {
					// 点击的是今日
					this.switchType = "今日"
					this.topPramsData.Search.Days = 0
					this.queryParmas.Search.Days = 0
					this.checkToday = true
					this.checkYestody = false
					this.checkMonth = false
					this.yestodayDisabled = true
					this.monthDisabled = true
					this.queryParmas.PageIndex = 1
					this.indexListData = []
					this.getIndexListData()
					this.getIndexTopListData()
				} else if (event == 1) {
					// 点击的是昨日
					this.switchType = "昨日"
					this.topPramsData.Search.Days = 1
					this.queryParmas.Search.Days = 1
					this.checkYestody = true
					this.checkToday = false
					this.checkMonth = false
					this.todayDisabled = true
					this.monthDisabled = true
					this.queryParmas.PageIndex = 1
					this.indexListData = []
					this.getIndexListData()
					this.getIndexTopListData()
				} else {
					// 点击的是本月
					this.switchType = "本月"
					this.topPramsData.Search.Days = 2
					this.queryParmas.Search.Days = 2
					this.checkMonth = true
					this.checkYestody = false
					this.checkToday = false
					this.yestodayDisabled = true
					this.todayDisabled = true
					this.queryParmas.PageIndex = 1
					this.indexListData = []
					this.getIndexListData()
					this.getIndexTopListData()
				}
			},
			// 销售开单点击事件
			urlOopenOrder() {

				let Id = uni.getStorageSync('CompanyInfo').Id
				if (Id) {
					uni.navigateTo({
						url: '/pages/openOrder/openOrder'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请先添加店铺信息!',
						showCancel: false,
						success: (val) => {
							if (val.confirm) {
								uni.navigateTo({
									url: '/pages/user/user'
								})
							}
						}
					})
				}
			},
			// 今日事件
			todayChangeClick(event) {
				this.status = "loading"
				this.switchType = "今日"
				this.checkToday = event.detail.value
				this.topPramsData.Search.Days = event.detail.value
				this.indexListData = []
				this.entity = []
			},
			// 昨日事件
			yestodayChangeClick(event) {
				this.status = "loading"
				this.switchType = "昨日"
				this.checkYestody = event.detail.value
				this.topPramsData.Search.Days = event.detail.value
				this.indexListData = []
			},
			// 本月事件
			monthChangeClick(event) {
				this.status = "loading"
				this.switchType = "本月"
				this.checkMonth = event.detail.value
				this.topPramsData.Search.Days = event.detail.value
				this.indexListData = []
			},
			// 获取首页列表数据
			getIndexListData(data) {
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetBillingData', this.queryParmas).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						let lists = res.Data
						res.Data.forEach(item => {
							item.CreateTime = util.formatDate('format', item.CreateTime)
							// 金额保留两位小鼠
						})
						if (res.Data.length == 0) {
							this.status = "noMore"
							this.contentText.contentnomore = this.switchType + "未开单"
							return
						}
						if (lists.length !== 0 && lists !== []) {
							if (this.queryParmas.PageIndex == 1) {
								this.indexListData = lists
								this.queryParmas.PageIndex += 1
							} else {
								this.indexListData = this.indexListData.concat(lists);
								this.queryParmas.PageIndex += 1
								this.status = "noMore"
							}
							this.status = "noMore"
							this.contentText.contentnomore = "没有更多了"
						} else {

							this.contentText.contentnomore = "没有更多了"
							this.status = "noMore"
						}
						uni.stopPullDownRefresh(); //停止刷新
						// 停止架子状态
						// uni.hideLoading();
					} else {
						this.$api.msg(res.Msg)
						// 停止架子状态
						this.status = "noMore"
					}

				}).catch(error => {
					// 停止状态加载
					this.status = "noMore"

				})
			},
			// 获取顶部销售数据
			getIndexTopListData() {
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetSalesStatistic', this.topPramsData).then(res => {
					if (res.Success) {
						this.historicalsales = res.Data.historicalsales
						this.totalsum = res.Data.todaysale.totalsum
						this.status = "noMore"
					} else {
						this.status = "noMore"
					}

				})
			},
			// 资料维护
			toInformation() {
				uni.navigateTo({
					url: '/pages/Information/Information'
				})
			},
			// 获取公司信息
			async getCompanyInfo() {
				await this.$http("post", "/Base_Manage/Base_Company/GetDataCompanyData", {
						Search: {
							condition: "CreatorId",
							keyword: uni.getStorageSync('userInfo').Id,
						},
					})
					.then((res) => {
						if (res.Success && res.Data.length > 0) {
							uni.setStorageSync('CompanyInfo', res.Data[0])
							this.queryParmas.Search.CommpayId = res.Data[0].Id
							this.topPramsData.Search.CommpayId = res.Data[0].Id
							// 获取顶部销售数据
							this.getIndexTopListData()

							// MAC地址
							this.getMAC()
						} else {
							uni.showModal({
								title: '提示',
								content: '账户尚未设置公司/店铺,请前往个人中心进行设置',
								showCancel: false,
								success: (val) => {
									if (val.confirm) {
										uni.navigateTo({
											url: '/pages/user/user'
										})
									}
								}
							})
						}
					});
			},
			getMAC() {
				this.$http('post', '/BO/PB_Printer/GetPrintData?CompanyId=' + uni.getStorageSync('CompanyInfo').Id)
					.then(
						res => {
							if (res.Success && res.Data) uni.setStorageSync('MAC', res.Data)
							else uni.setStorageSync('MAC', null)
						})
			},
		}
	}
</script>

<style scoped lang="scss">
	.textRed {
		color: red;
	}

	/* page {
		height: 100%;
		background-image: url(/static/background.png);
		background-size: cover;
		padding-bottom: 180rpx;
	} */
	.flexBox {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 8px;

		.tag {
			padding-top: 10rpx;
			image {
				width: 100rpx;
				height: 36rpx;
			}
		}

		.money {
			flex: 1;

			.b {
				font-size: 40rpx;
			}
		}

	}

	.content {
		height: 100%;
		width: 100%;
		background-image: url(/static/background.png);
		background-size: cover;
		/* overflow-y: scroll; */
	}

	.content .index-top {
		background-color: #ffffffa6;
		width: 100%;
		padding: 15rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}

	.indexButton {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
	}

	.indexButton view {
		padding: 30rpx 80rpx;
		font-size: 40rpx;
		border-radius: 26rpx;
		color: #fff;
		font-weight: bold;
	}

	.content .index-top .index-top-nav {
		display: flex;
		/* 
		justify-content: space-around; */
	}

	.content .index-top .index-top-title {
		color: #0070C5;
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 10rpx;
	}

	.content .index-top .imageExcell {
		display: flex;
		align-items: center;
		background: rgb(67, 143, 232);
		padding: 4px 12px 4px 12px;
		border-radius: 5px;
	}

	.content .index-top .imageExcell image {
		width: 30rpx;
		height: 30rpx;
	}

	.content .index-top .imageExcell text {
		color: #fff;
		font-weight: bold;
		margin-left: 5rpx;
	}

	.content .index-top .index-top-price {
		display: flex;
		justify-content: space-around;
		padding: 6rpx 10rpx;
		margin-top: 20rpx;
	}

	.content .index-top .index-top-price .top-price-item {
		font-size: 27rpx;
	}

	.content .index-top .index-top-price .top-price-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .index-top .index-top-nav .nav-title {
		color: #0482D4;
		font-size: 26rpx;
		font-weight: bold;
		padding-left: 10rpx;
		padding-top: 8rpx;
		margin-right: 30rpx;
	}

	.indexList {
		width: 93%;
		margin: 20rpx auto;
	}

	.active {}

	.indexList {
		/* #ifdef H5 */
		height: calc(100vh - 310px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	.indexList .scrollView .tag.active1 {
		color: #fff;
		background-color: #0482D4;
		padding: 5rpx 15rpx;
	}

	.indexList .scrollView .tag.active2 {
		color: #fff;
		background-color: brown;
		padding: 5rpx 15rpx;
	}

	.indexList .indexItem {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		align-items: center;
		padding-top: 10rpx;
		width: 100%;
		position: relative;

		.tagTop {
			margin-left: 20rpx;
		}

		.scrollTag {
			position: absolute;
			right: 0;
			top: 0;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.indexList .indexItem .list {
		margin-bottom: 10rpx;
		padding-left: 20rpx;
	}

	.indexItemTop {
		margin-right: 5rpx;
	}

	.indexItemTop .indexItemTopList {
		margin-bottom: 10rpx;
	}

	.content {


		/* 	display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>